<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>打印窗口</title>
    <style id="style-box">
      * {
        margin: 0;
        padding: 0;
      }

      body {
        margin: 0 auto;
        font-family: 微软雅黑, serif;
        font-size: 12px;
        background-color: #ffffff;
      }

      .top_menu {
        background: -webkit-gradient(
          linear,
          0 0,
          0 300%,
          from(rgb(248, 248, 255)),
          to(rgb(204, 204, 204))
        );
        color: rgb(0, 0, 0);
        width: 100%;
        min-height: 30px;
        line-height: 30px;
        border-left: 1px solid #cccccc;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
      }

      .t_but_end {
        width: auto;
        padding: 5px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        border-radius: 5px 5px 5px 5px;
        cursor: pointer;
        margin-left: 10px;
        text-align: center;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
      }

      .t_but_end img {
        vertical-align: middle;
        width: 15px;
        height: 15px;
        margin-right: 5px;
      }

      table {
        /*在谷歌浏览器中，表格里的字体要单独设，body设了都不起作用。*/
        font-family: 微软雅黑;
        font-size: 12px;
        border: 1px solid #d1d1d1;
        border-collapse: collapse;
        border-spacing: 0;
      }

      #bodyHtml {
        margin: 0;
        position: relative;
        overflow: auto;
      }

      td {
        white-space: nowrap;
      }

      th {
        white-space: nowrap !important;
      }
    </style>
  </head>

  <body>
    <div class="top_menu">
      <span style="margin-left: 5px"></span>
      <!-- <span class="t_but_end" onclick="googleprint()">
      <img src="./print.png" />打印
    </span> -->
      <div style="display: flex" onclick="onPrint()">
        <img src=" ./print.png" style="width: 20px; height: 20px; margin-left: 10px" />
        <div
          style="
            background-color: #70acfb;
            width: 60px;
            height: 25px;
            line-height: 25px;
            color: #fff;
            border-radius: 4px;
            text-align: center;
            font-size: 12px;
            margin-left: 10px;
          "
        >
          打印
        </div>
      </div>
    </div>
    <div id="bodyHtml"></div>
  </body>
  <script src="./qrcode.js"></script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/print-js/1.6.0/print.js"
    integrity="sha512-/fgTphwXa3lqAhN+I8gG8AvuaTErm1YxpUjbdCvwfTMyv8UZnFyId7ft5736xQ6CyQN4Nzr21lBuWWA9RTCXCw=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  ></script>
  <!-- <script src="./print.js"></script> -->
  <script>
    const html = localStorage.getItem('currentPrintHtml')
    const style = localStorage.getItem('currentPrintStyle')
    if (style) {
      const styleBox = document.getElementById('style-box')
      styleBox.innerHTML = style
    }
    document.getElementById('bodyHtml').innerHTML = html

    const qrCodeDiv = document.querySelector('#qrCode')

    // 使用 qrcode 生成二维码
    if (qrCodeDiv) {
      var qrcode = new QRCode(qrCodeDiv, {
        width: 100,
        height: 100,
        correctLevel: QRCode.CorrectLevel.L,
      })
      qrcode.makeCode(localStorage.getItem('currentQrCodeData'))
    }

    // 设置打印内容的宽度为表格的宽度
    const contentWidth = document.getElementsByClassName('content')
    console.log(contentWidth)

    const tableWidth = document.getElementById('table').offsetWidth
    if (tableWidth && contentWidth) {
      for (var i = 0; i < contentWidth.length; i++) {
        var element = contentWidth[i]
        element.style.width = tableWidth + 'px'
      }
    }

    function onPrint() {
      printJS({
        printable: 'bodyHtml',
        type: 'html',
        targetStyles: ['*'],
        onPrintDialogClose: () => {
          window.close() // 关闭窗口
        },
      })
    }
    // window.print()

    // 监听取消打印事件
    window.addEventListener('afterprint', function () {
      // 用户取消了打印，也可以执行关闭窗口的操作
      window.close()
    })
    // localStorage.removeItem('currentPrintHtml')
    // if (localStorage.getItem('currentQrCodeData')) { localStorage.removeItem('currentQrCodeData') }
  </script>
</html>
